<template>
<!-- 充值 -->
 <div class="recharge1">
   <header>
      <span><van-icon name="arrow-left" @click="$router.push('/layout/my/balace')"/></span>
      <h3>充值</h3>
      <span><van-icon name="ellipsis"/></span>
   </header>
   <main>
     <div class="charge">
       <span>充值方式</span>
       <div class="bank">
           <h3>
               <img src="../../../../images/余额/images/images/images/yinhang_03.jpg" alt="">
               建设银行(3183)
           </h3>
           <p>单日交易限额￥500000.00</p>
       </div>
       <van-icon name="arrow" class="arrow" />
     </div>
    <div class="van">
         <p>充值金额</p> 
       <div class="shuru1">
            <span>￥</span><input class="ipt" type="text" v-model="value1"  @touchstart.stop="show = true">
       </div>
     <van-number-keyboard
        :show="show"
        theme="custom"
        extra-key="."
        close-button-text="完成"
        @input="onInput"
        @delete="onDelete"
        @blur="show = true"
        v-model="value1"
        @close='onShow'
        />
    </div>
    <!-- <van-overlay :show="show1" @click="show1 = false" /> -->
   <div class="dialog" v-if="show1" @click="Close">
        <div class="tishi1">
         <div class='one'>
          <van-icon class="cross" name="cross" size="1.5rem" @click="Cha"/>
          <h3>请输入支付密码</h3>
          <span></span>
         </div>
        <p>充值到零钱</p> 
        
            <span class='money'>￥<input class="ipt1" type="text" v-model="value1"  @touchstart.stop="show = true"></span>
       
        <!-- 密码输入框 -->
        <van-password-input
        :value="value"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
        />
               
         </div>
         <van-number-keyboard
                v-model="value"
                :show="showKeyboard"
                @blur="showKeyboard = false"
                />
   </div>
   <div class="dialogTwo" v-if='isDialog' @click="topaySucess">
     <div class="payload">
         <p>正在支付...</p>
       </div>
   </div>
    <div class="paysucess" v-if="ifPaysucess">
        <div>
            <img src="../../../../images/余额/images/pay_03.jpg" alt="">
            <p>充值成功</p>
             <span class='payMoney'>￥<input class="ipt1" type="text" v-model="value1"></span>
        </div>
        <button @click="Finish(value)">完成</button>
    </div>
   </main>
 </div>
</template>

<script>
import {apiPayword} from '@/api/payword.js'
import {apiRecharge} from '@/api/recharge.js'
import {mapActions,mapMutations} from 'vuex'
export default {
 data(){
     return {
          show: true,
          show1:false,//密码
        value: '',//充值的数字
        value1: '',//密码输入的数字
        showKeyboard: true,
        ifPaysucess:false,
        isDialog:false,
        user_id:1,
        pay_password:'111111',
        paypassword:'111111',
        repaypassword:'111111'
     }
 },
 created(){
   this.getRecharge()
  
 },
 //监听属性 类似于data概念
  computed: {
    // ...mapState(['recharge']),
    // ...mapGetters(['allNum'])
  },
 methods:{
      ...mapActions(['getRecharge']),
      ...mapMutations(['ADD_RECHARGE']), 
      onInput() {
    },
     setPayword(){
      apiPayword({
            user_id:this.user_id,
            paypassword:this.paypassword,
            repaypassword:this.repaypassword
       }).then(res1=>{
           console.log(res1,'res1')
       })
       
    },
     Recharge(){
        apiRecharge({
          user_id:this.user_id,
          pay_password:this.pay_password
        }).then(res=>{
            console.log(res,'sss')
        })
        
        //console.log(value,'value')
    },
    onDelete() {
     //console.log('删除')
    },
    onShow(){
        this.show1=true;
        this.show=false
    },
    Close(){
        this.show1=false
        this.isDialog=false;
        this.showKeyboard=true;
        this.show=false
        // this.$router.push('/bankCard')
    },
    topaySucess(){
        this.ifPaysucess=true;
        this.isDialog=false;
    },
    clickJump(){
    const timejump = 1;
    if(!this.timer){
      this.count = timejump ;
      this.show = false;
      this.timer = setInterval(()=>{
      if(this.count > 0 && this.count <= timejump ){
        this.count--;
      }else{
        this.show = true;
        clearInterval(this.timer);
        this.timer = null;
        //跳转的页面写在此处
       this.ifPaysucess=true;
       this.show=false;
      }
     },200)
    }
  },
  //点击完成
  Finish(value){
   this.allNum+=value;
  
    // console.log(this.allNum,'nnn')
    //  console.log(value,'vvvvvv')
     this.$router.push('/layout/my/balace')
  },
  Cha(){
      this.show1=false;
      this.value=''
      this.value1=''
  }
 },
 //监听
 watch: {
     //点击键盘上的完成时
    value(value) {
         
      if (value.length === 6 && value === this.pay_password) {
        this.Recharge()
   this.setPayword()
       this.errorInfo = '密码正确';
        this.isDialog=true;
        this.show1=false;
        this.showKeyboard=false;
        this.show=false;
         this.clickJump()
      } else {
        this.errorInfo = '';
      }
    },
  },
}

</script>
<style scoped>
.recharge1{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
header{
     display: flex;
    height: 3.75rem;
    background-color: #51547d;
    justify-content: space-between;
    align-items: center;
    padding: 0 .9375rem;
    color:#fff;
}
.paysucess{
    width:100%;
    height:100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
     display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.paysucess div{
    text-align: center;
   
}
.paysucess img{
    width: 3.75rem;
    height: 3.75rem;
}
.paysucess div p{
    margin: 1.875rem 0;
}
.payMoney{
    font-size: 2.1875rem;
    margin-left: 1.25rem;
}
.paysucess button{
    width: 12.5rem;
    height: 3.125rem;
    text-align: center;
    background-color: #f2f2f2;
    border: none;
    color: #19a96d;
}
.payload{
    width: 12.5rem;
    height: 12.5rem;
    background-color: #333;
    color: #fff;
    position: absolute;
    left: 50%;
    margin-left: -20%;
    top: 50%;
    margin-top: -20%;
    text-align: center;
    line-height: 12.5rem;
    border-radius: 1.875rem;
}
.bank{
    display: flex;
    flex-direction: column;
    height: 3.75rem;
}
.bank img{
    width: 1.25rem;
}
.ipt{
    border: none;
    border-bottom: 1px solid #ccc;
}
.ipt1{
    margin-top: -1.875rem;
    border: none;
    width: 6.25rem;
}
.cross{
    margin-top: 1.25rem;
}
.shuru1{
    display: flex;
    margin-top: 3.125rem;
    padding: 0 1.25rem;
    font-weight: bold;
    font-size: 1.875rem;
}

.header span{
    margin-left: -9.375rem;
}
.header h3{
    margin-left: -15.625rem;
}
.charge{
    height: 6.25rem;
    display: flex;
    justify-content: space-between;
    background-color: #ededed;
    padding:.9375rem 1.25rem;
}
.arrow{
    margin-top: 1.25rem;
}
.van{
    width: 100%;
    height: auto;
    border-radius: 1.25rem;
    background-color: #fff;
}
.van p{
    padding: 2.5rem 1.25rem;
    font-size: 1.25rem;
}
main{
    background-color: #fff;
}
.van-field__control{
    height: 3.125rem;
}
.tishi1{
    width: 25rem;
    height: 18.75rem;
    background-color: #fff;
    color: #000;
    position: absolute;
    left: 50%;
    margin-left:-12.5rem;
    top: 50%;
    margin-top: -12.5rem;
    text-align: center;
    border-radius: 1.875rem;
    display: flex;
    flex-direction: column;
}
.tishi1 .one{
    height: 4.375rem;
    line-height: 4.375rem;
    display: flex;
    justify-content: space-around;
    border: none;
    border-bottom: 1px solid green;

}
.money{
    width: 100%;
    display:flex;
     justify-content:center;
    height:5rem;
     font-weight: bold;
    font-size: 1.875rem;
    text-align: center;
}
.tishi1 p{
    height: 3.125rem;
    margin-top: 1.25rem;
}
.van-password-input{
   margin-bottom: .625rem;
}
.shuru1{
    display: flex;
}
.dialog{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
.dialogTwo{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
</style>